<template>
	<el-popover
		v-model="showPopover"
		:width="popWidth"
		:disabled="disabled"
		:visible-arrow="false"
		placement="bottom"
		popper-class="no-padding-popover"
		trigger="manual"
	>
		<crm-relative
			v-if="!disabled && showSelectView"
			ref="crmrelative"
			:crm-type="item.data.formType"
			:action="relationAction"
			:radio="radio"
			:createable="item.createable"
			:footer="item.data.footer"
			:selected-data="selectedData"
			:disabledRows="disabledRows"
			:show="showPopover"
			:query="query"
			:style="{ height: item.bigModel ? '85vh' : '500px' }"
			@close="showPopover = false"
			@changeCheckout="checkInfos"
			:beforeFetchList="() => beforeFetchList(item)"
		/>
		<flexbox
			slot="reference"
			:class="[disabled ? 'is_disabled' : 'is_valid']"
			wrap="wrap"
			class="user-container"
			@click.native="contentClick"
		>
			<div
				v-for="(aitem, aindex) in dataValue"
				:key="aindex"
				class="user-item"
				:class="{ 'user-item--readonly': checkReadonly(aitem) }"
				@click.stop="deleteinfo(aitem, aindex)"
			>
				{{ getShowName(aitem) }}
				<i class="delete-icon el-icon-close" />
			</div>
			<div v-if="dataValue.length == 0" class="add-item">+添加</div>
		</flexbox>
	</el-popover>
</template>

<script type="text/javascript">
import CrmRelative from './CrmRelative'
import arrayMixin from './arrayMixin'

export default {
	name: 'CrmRelativeCell', // 相关模块CRMCell
	inject: {
		createFields: {
			default: void 0
		}
	},
	components: {
		CrmRelative
	},
	mixins: [arrayMixin],
	props: {
		relation: {
			// 相关ID
			type: Object,
			default: () => {
				return {}
			}
		},
		radio: {
			// 是否单选
			type: Boolean,
			required: true
		},
		crmType: [String],
		beforeFetchList: {
			type: Function,
			default: (v) => v
		},
		// 禁止操作勾选的行
		disabledRows: {
			type: Array,
			default: () => []
		},
		// 获取列表的查询条件
		query: Object
	},
	data() {
		return {
			showPopover: false, // 展示popover
			showSelectView: false, // 内容
			// radio: false, // 是否单选
			relationAction: { type: 'default' }
		}
	},
	computed: {
		// 如果有相关ID  展示相关效果 例如客户下的订单和保单
		isRelationShow() {
			return this.item && this.item.data && this.item.data.relation_id
		},
		// 默认选中值 2020-10-21增
		selectedData() {
			const res = {}
			res[this.item.data.formType] = this.dataValue
			return res
		},
		popWidth() {
			return this.item.bigModel
				? document.documentElement.clientWidth * 0.9
				: 700
		}
	},
	watch: {
		relation: function (val) {
			if (val.moduleType) {
				this.relationAction = { type: 'condition', data: val }
			} else {
				this.relationAction = { type: 'default' }
			}
		}
	},
	mounted() {
		if (this.relation && this.relation.moduleType) {
			this.relationAction = { type: 'condition', data: this.relation }
		} else {
			this.relationAction = { type: 'default' }
		}
		this.$bus.$on('get-value', (key) => {
			if (key == this.item.key) {
				return this.item.value
			}
		})
		setTimeout(() => {
			console.log(this.query)
		}, 1000)
	},
	methods: {
		/** 选中 */
		checkInfos(data) {
			this.dataValue = data.data ? data.data : []
			this.$emit('value-change', {
				index: this.index,
				value: data.data,
				item: this.item
			})
			this.$nextTick(() => {
				this.createFields?.validateField(this.item.key)
			})
		},
		/** 删除 */
		deleteinfo(item, index) {
			if (this.disabled || this.checkReadonly(item)) return
			if (this.radio && this.$refs.crmrelative) {
				// 如果单选告知删除
				this.$refs.crmrelative.clearAll()
			}
			if (this.dataValue.length === 1) {
				this.dataValue = []
			} else {
				this.dataValue.splice(index, 1)
			}

			this.$emit('value-change', {
				item: this.item,
				index: this.index,
				value: this.dataValue
			})
		},
		contentClick() {
			this.showSelectView = true
			this.showPopover = true
		},
		getShowName(data) {
			if (this.item.data.formType === 'receivables') {
				return data.number
			} else if (this.item.data.formType === 'customer') {
				return data.customerName
			} else if (this.item.data.formType === 'business') {
				return data.businessName
			} else if (this.item.data.formType === 'contract') {
				return data.contractNum || data.num
			} else if (this.item.data.formType === 'payable') {
				return data.sn
			} else if (this.item.data.formType === 'otherPayable') {
				return data.sn
			} else if (this.item.data.formType === 'relation') {
				return data.relationName
			} else if (this.item.data.formType === 'customerpersonal') {
				return data.customerName
			} else if (this.item.data.formType === 'businesspersonal') {
				return data.businessName
			} else if (this.item.data.formType === 'contractpersonal') {
				return data.contractName
			} else if (this.item.data.formType === 'claim') {
				return data.sn
			} else if (this.item.data.formType === 'channel') {
				return data.channelName
			}
			return data.name
		},
		// 通过禁用勾选项组 判断是否只读
		checkReadonly(aitem) {
			if (this.crmType) {
				var key = this.crmType.replace('personal', '') + 'Id'
				var result = !!this.disabledRows.find((row) => row[key] == aitem[key])
				return result
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.user-container {
	min-height: 34px;
	max-height: 200px;
	overflow-y: auto;
	position: relative;
	border-radius: 3px;
	font-size: 12px;
	border: 1px solid #ddd;
	color: #333333;
	padding: 2px;
	line-height: 14px;
	.user-item {
		padding: 5px;
		background-color: #e2ebf9;
		border-radius: 3px;
		margin: 2px;
		cursor: pointer;

		&--readonly {
			background-color: #e4e7ed;
			cursor: not-allowed;
			i {
				display: none;
			}
		}
	}
	.add-item {
		padding: 5px;
		color: #3e84e9;
		cursor: pointer;
	}
	.delete-icon {
		color: #999;
		cursor: pointer;
	}
}

.user-container.is_disabled {
	background-color: #f5f7fa;
	border-color: #e4e7ed;
	cursor: not-allowed;
	.user-item {
		background-color: #f0f4f8ea;
		color: #c0c4cc;
		cursor: not-allowed;
	}
	.delete-icon {
		color: #c0c4cc;
		cursor: not-allowed;
	}
	.add-item {
		color: #c0c4cc;
		cursor: not-allowed;
	}
}

.user-container.is_valid:hover {
	border-color: #c0c4cc;
}
</style>
